<template>
  <div class="container">
    <div class="app-container">
      <el-button size="mini" type="primary" class="box" @click="dialogVisible=true">添加权限</el-button>
      <el-table :data="list" row-key="id" default-expand-all>
        <el-table-column
          label="名称"
          prop="name"
        />
        <el-table-column
          label="标识"
          prop="code"
        />
        <el-table-column
          label="描述"
          prop="description"
        />
        <el-table-column
          label="操作"
        >
          <template v-slot="{row}">
            <el-button v-if="row.type===1" size="mini" type="text" @click="add(row)">添加</el-button>
            <el-button size="mini" type="text" @click="compileForm(row.id)">编辑</el-button>
            <el-button size="mini" type="text" @click="romove(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :title="permissionForm.id?'编辑权限':'添加权限'"
      :visible="dialogVisible"
      width="500px"
      @close="btnOn"
    >
      <el-form ref="form" label-width="120px" :rules="rules" :model="permissionForm">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="permissionForm.name" size="mini" style="width:280px" />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="permissionForm.code" size="mini" style="width:280px" />
        </el-form-item>
        <el-form-item label="权限描述" prop="description">
          <el-input v-model="permissionForm.description" type="textarea" size="mini" :rows="3" style="width:280px" />
        </el-form-item>
        <el-form-item prop="enVisible">
          <el-switch
            v-model="permissionForm.enVisible"
            active-text="开启"
            active-value="1"
            inactive-value="0"
          />
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="center">
            <el-button size="mini" type="primary" @click="btnOk">确定</el-button>
            <el-button size="mini" @click="btnOn">取消</el-button>
          </el-row>
        </el-form-item>

      </el-form>

    </el-dialog>
  </div>
</template>
<script>
import { getPermission, addPermission, detailPermission, removePermission, compilePermission } from '@/api/permission'
import { transListToTreeData } from '@/utils/index'
export default {
  name: 'Permission',
  data() {
    return {
      list: [], // 装初始数据
      dialogVisible: false, // 控制弹出开关
      permissionForm: { // 装表单的数据
        name: '', // 权限点名字
        code: '', // 权限标识
        description: '', // 权限描述
        type: 1, // 权限类型
        pid: 0, // 父级id
        enVisible: '0' // 权限开启状态
      },
      rules: {
        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '标识不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getPermission()
  },
  methods: {
    async getPermission() {
      this.list = transListToTreeData(await getPermission(), 0)
    },
    btnOn() { // 关闭弹窗
      this.permissionForm = this.$options.data().permissionForm
      this.dialogVisible = false
      this.$refs.form.resetFields()
    },
    btnOk() { // 点击确定开始新增
      this.$refs.form.validate(async isok => {
        if (isok) {
          if (!this.permissionForm.id) {
            await addPermission(this.permissionForm)
            this.$message.success('新增成功')
          } else {
            await compilePermission(this.permissionForm)
          }
          this.getPermission()
          this.btnOn()
        }
      })
    },
    add(row) { // 点击添加
      this.dialogVisible = true
      this.permissionForm.pid = row.id
      this.permissionForm.type = 2
    },
    async compileForm(id) { // 点击编辑
      this.permissionForm = await detailPermission(id)
      this.dialogVisible = true
    },
    romove(id) { // 删除权限
      this.$confirm('此操作将永久删除该文件, 是否继续?').then(async() => {
        await removePermission(id)
        this.getPermission()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    }
  }
}
</script>

<style scoped>
.box {
  margin: 10px;
}
</style>
